<script setup lang="ts">
import type { BannerItem } from '@/types/home'
import { ref } from 'vue'
import { commonRegex } from '@/utils';

const activeIndex = ref(0)

// 当 swiper 下标发生变化时触发
const onChange: UniHelper.SwiperOnChange = (ev) => {
  activeIndex.value = ev.detail.current
}
// 定义 props 接收
defineProps<{
  list: BannerItem[]
}>()

const onItemTab = ({ hrefUrl }) => {
  if (!hrefUrl) {
    return
  }
  if (commonRegex.url.test(hrefUrl)) {
    uni.navigateTo({
      url: `/pages/public/web-page?url=${encodeURIComponent(hrefUrl)}`
    })
  } else if (/^\/pages.+/.test(hrefUrl)) {
    uni.navigateTo({
      url: hrefUrl
    })
  }
}
</script>

<template>
  <view class="carousel">
    <swiper :circular="true" :autoplay="false" :interval="3000" @change="onChange">
      <swiper-item v-for="item in list" :key="item.id" @tap="onItemTab(item)">
        <image mode="aspectFill" class="image" :src="item.imgUrl"></image>
      </swiper-item>
    </swiper>
    <!-- 指示点 -->
    <view class="indicator">
      <text v-for="(item, index) in list" :key="item.id" class="dot" :class="{ active: index === activeIndex }"></text>
    </view>
  </view>
</template>

<style lang="scss">
@import './styles/XtxSwiper.scss';
</style>
